<!--detail-->
<template>
  <div class="detail_box">
    <ul class="list">
      <li class="icon">
        <div class="lk_icon blue_bgc">装</div>
        <div class="rt_cont">
          <div class="tt weight">
            <span>杨小强</span>
            <span>18512546035</span>
          </div>
          <div class="sub">
            <span>山东</span>
            <span>烟台</span>
            <span>莱州</span>
            <span>莱州市文昌办电子10005号</span>
          </div>
        </div>
      </li>
      <li class="icon">
        <div class="lk_icon orange_bgc">卸</div>
        <div class="rt_cont">
          <div class="tt weight">
            <span>杨小强</span>
            <span>18512546035</span>
          </div>
          <div class="sub">
            <span>山东</span>
            <span>烟台</span>
            <span>莱州</span>
            <span>莱州市文昌办电子10005号</span>
          </div>
        </div>
      </li>
      <li class="no_icon">
        <span>整车</span>
        <span>9.6/13/17.5米/占6.8米</span>
        <span>高栏/平板</span>
        <span>2.5吨/设备</span>
        <span>处理时间：2020-04-29</span>
      </li>
      <li class="no_icon">
        <span>备注：相关内容</span>
      </li>
      <li class="border icon">
        <div class="line_dashed"></div>
        <div class="cont">
          <div class="lk_icon green_bgc">车</div>
          <div class="rt_cont">
            <div class="tt">
              <span>刘大郎</span>
              <span>445122198010105012</span>
              <span>15705922222</span>
            </div>
            <div class="sub">
              <span>鲁UN5223 / 6.8米 / 高栏</span>
            </div>
          </div>
          <el-image :src="url" :preview-src-list="[url]" />
        </div>
        <div class="line_dashed"></div>
      </li>
      <li class="no_icon">
        <span>运费：<span class="red_clr">2000</span>元</span>
        <span>信息支付：<span class="red_clr">100</span>元</span>
        <span>收款方：A15</span>
        <span>操作人：汇丰周</span>
      </li>
    </ul>
    <div class="btn_group">
      <el-button type="primary" size="small" plain @click="onEdit"
        >编辑</el-button
      >
      <el-button type="primary" size="small" @click="onSubmit"
        >提交订单</el-button
      >
      <el-button type="default" size="small" @click="onCancle">取消</el-button>
    </div>
  </div>
</template>
<script>
import yanzi from '@/assets/image/yanzi.jpg';
export default {
  data () {
    return {
      url: yanzi
    }
  },
  methods: {
    onEdit () {
      this.$emit('handleInnerAction', { which: 'edit' })
    },
    onSubmit () {
      this.$emit('handleInnerAction', { which: 'submi' })
    },
    onCancle () {
      this.$emit('handleInnerAction', { which: 'edit' })
    },
  }
}
</script>
<style lang="scss" scoped>
.detail_box {
  .list {
    li {
      padding: 10px 0;
      overflow: hidden;
    }
    .icon {
      position: relative;
      .lk_icon {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        position: absolute;
        top: 50%;
        margin-top: -15px;
      }
      .rt_cont {
        display: block;
        padding-left: 45px;
        .tt {
          span {
            line-height: 24px;
            &:not(:first-child) {
              margin-left: 10px;
            }
          }
        }
        .sub {
          span {
            line-height: 22px;
            &:not(:first-child) {
              margin-left: 10px;
            }
          }
        }
      }
    }
    .no_icon {
      span {
        line-height: 22px;
        &:not(:first-child) {
          margin-left: 10px;
        }
      }
      .tt {
        span {
          line-height: 22px;
          &:not(:first-child) {
            margin-left: 10px;
          }
        }
      }
      .sub {
        span {
          line-height: 22px;
          &:not(:first-child) {
            margin-left: 10px;
          }
        }
      }
    }
    .border {
      .cont {
        padding: 15px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        .rt_cont {
          flex: 1;
        }
        .el-image {
          width: 120px;
          height: 70px;
          /deep/ .el-icon-circle-close {
            color: #d2d2d2;
          }
        }
      }
      .line_dashed {
        width: 100%;
        height: 1px;
        background-image: linear-gradient(
          to right,
          #f6f7fa %0,
          #f6f7fa 50%,
          #ffffff 50%
        );
        background-size: 12px 1px;
        background-repeat: repeat-x;
      }
    }
  }
  .weight {
    font-weight: 600;
  }
  .btn_group {
    text-align: center;
    margin: 25px 0 10px;
  }
}
</style>